/**
 * 我的钱包
 */
<template>
  <div>
    <!-- 钱包 -->
    <div class="wallet_box" > 
      <div class="common_title">
        <span>钱包</span>
      </div>
      <el-row :gutter="20"   v-if="info">
        <el-col :span="24">
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">会员钱包余额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.userBalances) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card1.png" />
              </el-col>
            </el-card>
          </el-col>
        
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">共享卡钱包总额</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.userMatrixBalances }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col> 
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">会员NK卡余额 </span>
                  <div class="font18 text-black font-w6 margin-t10">
                    <span>$</span>
                    {{ b(info.cardBalance) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card3.png" />
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">会员卡Bin</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.count }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card4.png" />
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="card_wallet">
              <el-col :span="16">
                <div>
                  <span class="font12">有效会员</span>
                  <div class="font18 text-black font-w6 margin-t10">
                    {{ info.userCount }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <img src="~@/assets/img/icon_card2.png" />
              </el-col>
            </el-card>
          </el-col>
        </el-col> 
    </el-row>
    </div> 


    <div class="wallet_box" > 
      <div class="common_title">
        <span>钱包</span>
      </div>
      <el-row :gutter="20"   v-if="info" style="margin: 0 10px"> 
        <el-col :span="24"> 
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="pro_box"
              v-if="info"
            > 
              <el-col :span="8">
                <div class="card_wallet2" style="width: 100%;">
                  <el-progress
                    type="circle"
                    :percentage="
                      info.transactionCount == 0
                        ? 0
                        : Math.round(
                            (info.refuseCount / (info.transactionAmount - info.voidCount)) * 100
                          )
                    "
                    color="#439A86"
                    define-back-color="#CFCACA"
                    :width="60"
                  ></el-progress>
                  <div class="aline-c margin-l20" style="width: 200px;">
                    <div class="font15 font-w6 text-black">拒付率</div>
                    <div class="pro_t margin-t5">
                      <span class="text-gree">{{ info.refuseCount }}</span>
                      /
                      {{ info.transactionCount - info.voidCount }}
                    </div>
                  </div>
                </div> 
              </el-col>  
              <el-col :span="8">
                <div class="card_wallet2"  style="width: 100%;  margin: 0 20px;" > 
                  <el-progress
                    type="circle"
                    :percentage="
                      info.transactionCount == 0
                        ? 0
                        : Math.round(
                            (info.refundCount / (info.transactionAmount - info.voidCount)) * 100
                          )
                    "
                    color="#439A86"
                    define-back-color="#CFCACA"
                    :width="60"
                  ></el-progress>
                  <div class="aline-c margin-l20">
                    <div class="font15 font-w6 text-black">退款率</div>
                    <div class="pro_t margin-t5">
                      <span class="text-gree">{{ info.refundCount }}</span>
                      /
                      {{ info.transactionCount - info.voidCount }}
                    </div>
                  </div>
                </div> 
              </el-col> 
            
              <el-col :span="8">
                <div class="card_wallet2" style="width: 100%; "> 
                  <el-progress
                    type="circle"
                    :percentage="
                      info.transactionAmount == 0
                        ? 0
                        : Math.round(
                            (info.refundAmount / (info.transactionAmount - info.voidAmount)) * 100
                          )
                    "
                    color="#439A86"
                    define-back-color="#CFCACA"
                    :width="60"
                  ></el-progress>
                  <div class="aline-c margin-l20">
                    <div class="font15 font-w6 text-black">退款金额率</div>
                    <div class="pro_t margin-t5">
                      <span class="text-gree">{{ info.refundAmount }}</span>
                      /
                      {{ info.transactionAmount - info.voidAmount }}
                    </div>
                  </div>
                </div>
              </el-col> 
            </el-row> 
          </el-col>  
      </el-row>
    </div>

    <div class="wallet_box" > 
      <div class="common_title">
        <span>渠道分组统计</span>
      </div>
      <el-row :gutter="20"   v-if="info" style="margin: 0 10px"> 
        <el-col :span="24"> 
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="pro_box"
              v-if="info"
            > 
              <el-col :span="8">
                <div class="card_wallet2" style="width: 100%;">
                  <el-progress
                    type="circle"
                    :percentage="
                      info.transactionCount == 0
                        ? 0
                        : Math.round(
                            (info.refuseCount / (info.transactionAmount - info.voidCount)) * 100
                          )
                    "
                    color="#439A86"
                    define-back-color="#CFCACA"
                    :width="60"
                  ></el-progress>
                  <div class="aline-c margin-l20" style="width: 200px;">
                    <div class="font15 font-w6 text-black">拒付率</div>
                    <div class="pro_t margin-t5">
                      <span class="text-gree">{{ info.refuseCount }}</span>
                      /
                      {{ info.transactionCount - info.voidCount }}
                    </div>
                  </div>
                </div> 
              </el-col>  
              <el-col :span="8">
                <div class="card_wallet2"  style="width: 100%;  margin: 0 20px;" > 
                  <el-progress
                    type="circle"
                    :percentage="
                      info.transactionCount == 0
                        ? 0
                        : Math.round(
                            (info.refundCount / (info.transactionAmount - info.voidCount)) * 100
                          )
                    "
                    color="#439A86"
                    define-back-color="#CFCACA"
                    :width="60"
                  ></el-progress>
                  <div class="aline-c margin-l20">
                    <div class="font15 font-w6 text-black">退款率</div>
                    <div class="pro_t margin-t5">
                      <span class="text-gree">{{ info.refundCount }}</span>
                      /
                      {{ info.transactionCount - info.voidCount }}
                    </div>
                  </div>
                </div> 
              </el-col> 
            
              <el-col :span="8">
                <div class="card_wallet2" style="width: 100%; "> 
                  <el-progress
                    type="circle"
                    :percentage="
                      info.transactionAmount == 0
                        ? 0
                        : Math.round(
                            (info.refundAmount / (info.transactionAmount - info.voidAmount)) * 100
                          )
                    "
                    color="#439A86"
                    define-back-color="#CFCACA"
                    :width="60"
                  ></el-progress>
                  <div class="aline-c margin-l20">
                    <div class="font15 font-w6 text-black">退款金额率</div>
                    <div class="pro_t margin-t5">
                      <span class="text-gree">{{ info.refundAmount }}</span>
                      /
                      {{ info.transactionAmount - info.voidAmount }}
                    </div>
                  </div>
                </div>
              </el-col> 
            </el-row> 
          </el-col>  
      </el-row>
    </div>
 
 
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  numberNo,
  spStr,
  timestampSubTime
} from "../../utils/util";
import {
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  format,
  getUrl,
} from "../../api/axiosFun"; 
export default {
  data() {
    return {
      info: null,
      b: format,
      numberNo: numberNo, 
 
    };
  },
  // 注册组件
  components: {
    
  },
  created() {
    this.getInfo(); 
  },
  methods: { 
    getInfo() {
      service
        .get("/api/admin/getData", {})
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    }, 
   
  },
};
</script>

<style scoped>
.wallet_box { 
  border-radius: 8px;
  background: #fff;
  padding:0  10px 20px 10px;
  margin-bottom: 20px;
}
.card_wallet {
  padding: 10px 0 20px;
  height: 80px;
  background-size: 100% 100%;
  border-radius: 20px;
  color: #a0aec0;
}

.pro_box .el-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .el-progress .el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
/deep/ .el-progress--circle .el-progress__text {
  font-size: 14px !important;
  font-weight: 600;
}
.tabBox{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.tabBox span{
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}
.tabBox span.cur{ 
  background: #2e3094;
  color: #ffff;
  border-bottom: 2px solid #2e3094;

}
.card_wallet2{
  display: flex;
  box-shadow: 0 2px 0.0625rem 0 rgba(0,0,0,.1);
  border-radius: 10px;
  background: #fff;
  padding: 30px;
 
  
}
</style>
 
 